<form id="permissionForm">
    <input th:if="${permission?.permissionId != null}" name="permissionId" type="hidden" th:value="${permission?.permissionId}">
    <input type="hidden" class="form-control" id="detailParentId" name="parentId" th:value="${permission.parentId}" >
    <div th:if="${permission?.permissionId == null}" class="form-group row">
        <label class="col-sm-2 col-form-label">类型:</label>
        <div class="col-sm-10">
            <label class="radio-inline pr-5"><input type="radio" th:field="*{permission.type}" name="type" value="0"> 目录</label>
            <label class="radio-inline pr-5"><input type="radio" th:field="*{permission.type}" name="type" value="1"> 菜单</label>
            <label class="radio-inline pr-5"><input type="radio" th:field="*{permission.type}" name="type" value="2"> 按钮</label>
        </div>
    </div>
    <div th:if="${permission?.permissionId != null}" class="form-group row">
        <label class="col-sm-2 col-form-label">类型:</label>
        <div class="col-sm-10">
            <label class="radio-inline pr-5"><input type="radio" th:field="*{permission.type}" name="type" value="0" disabled> 目录</label>
            <label class="radio-inline pr-5"><input type="radio" th:field="*{permission.type}" name="type" value="1" disabled> 菜单</label>
            <label class="radio-inline pr-5"><input type="radio" th:field="*{permission.type}" name="type" value="2" disabled> 按钮</label>
        </div>
    </div>
    <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">资源名称</label>
        <div class="col-sm-10">
            <input type="text" th:value="${permission?.name}" name="name" class="form-control" id="name"
                   placeholder="请填写资源名称" required>
        </div>
        <div class="invalid-feedback">请填写资源名称</div>
    </div>
    <div class="form-group row">
        <label for="detailParentMenu" class="col-sm-2 col-form-label">上级资源</label>
        <div class="col-sm-10">
            <input type="text" class="form-control cursor-pointer" id="detailParentMenu"
                   th:value="${parentName}" onclick="showMenu(2)" readonly="readonly">
            <div class="invalid-feedback">请选择上级资源</div>
        </div>
    </div>
    <div th:style="${permission.type != 0 ? '' : 'display:none'}" class="form-group row menuFlag">
        <label for="url" class="col-sm-2 col-form-label">资源url</label>
        <div class="col-sm-10">
            <input type="text" th:value="${permission?.url}" name="url" class="form-control" id="url"
                   placeholder="请填写资源url" th:attr="required=${permission.type != 0 ? 'required' : null}">
            <div class="invalid-feedback">请填写资源url</div>
        </div>
    </div>
    <div th:style="${permission.type != 0 ? '' : 'display:none'}" class="form-group row menuFlag btnFlag">
        <label for="perms" class="col-sm-2 col-form-label">资源标识</label>
        <div class="col-sm-10">
            <input type="text" th:value="${permission?.perms}" name="perms" class="form-control" id="perms"
                   placeholder="请填写资源标识" th:attr="required=${permission.type != 0 ? 'required' : null}">
            <div class="invalid-feedback">请填写资源标识</div>
        </div>
    </div>
    <div class="form-group row menuFlag catalogFlag">
        <label for="orderNum" class="col-sm-2 col-form-label">排序</label>
        <div class="col-sm-10">
            <input type="number" th:value="${permission?.orderNum}" name="orderNum" class="form-control" id="orderNum"
                   placeholder="请填写排序" required>
            <div class="invalid-feedback">请填写排序</div>
        </div>
    </div>
    <div th:style="${permission.type != 2 ? '' : 'display:none'}" class="form-group row menuFlag catalogFlag">
        <label for="icon" class="col-sm-2 col-form-label">图标</label>
        <div class="col-sm-10">
            <input type="text" th:value="${permission?.icon}" name="icon" class="form-control" id="icon"
                   placeholder="请填写图标" th:attr="required=${permission.type != 2 ? 'required' : null}">
            <div class="invalid-feedback">请填写图标</div>
        </div>
    </div>
    <div class="form-group row">
        <label for="description" class="col-sm-2 col-form-label">描述</label>
        <div class="col-sm-10">
            <input type="text" th:value="${permission?.description}" name="description" class="form-control" id="description"
                   placeholder="请填写描述" required>
            <div class="invalid-feedback">请填写描述</div>
        </div>
    </div>
</form>

<script type="text/javascript">

    // 图标选择器
    $(function () {
        $('#icon').iconpicker({animation: false});
    })

    // 类型选择事件
    $('input:radio[name="type"]').on("click", function () {
        // initPermissionForm();
        var menuType = $('input:radio[name="type"]:checked').val();
        if (menuType === "0") {
            $(".btnFlag").hide();
            $(".menuFlag").hide();
            $(".catalogFlag").show();
            $('#icon').addClass('required')
            $('#orderNum').addClass('required')
            $('#perms').removeAttr('required')
        }
        if (menuType === "1") {
            $(".menuFlag").show();
        }
        if (menuType === "2") {
            $(".catalogFlag").hide();
            $(".menuFlag").hide();
            $(".btnFlag").show();
            $('#icon').removeAttr('required')
            $('#orderNum').removeAttr('required')
            $('#url').removeAttr('required')
        }
    })

    function initPermissionForm() {
        $("#name").val("");
        $("#url").val("");
        $("#perms").val("");
        $("#orderNum").val("");
        $("#icon").val("");
        $("#description").val("");
    }
</script>